<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .main {
        width: 900px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <div class="main"></div>
    <script src="../assets/lib/echarts/echarts.min.js"></script>
    <script>
      const myChart = echarts.init(document.querySelector(".main"));
      const option = {
        title: {
          text: "成绩 score",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        legend: {
          data: ["平均分", "低于60分人数", "60到80分之间", "高于80分人数"],
        },
        xAxis: [
          {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            // name: "Precipitation",
            min: 0,
            max: 100,
            axisLabel: {
              formatter: "{value} 分",
            },
          },
          {
            type: "value",
            // name: "Temperature",
            min: 0,
            max: 10,
            axisLabel: {
              formatter: "{value} 人",
            },
          },
        ],
        series: [
          {
            name: "平均分",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value + " 分";
              },
            },
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
              3.3,
            ],
          },
          {
            name: "低于60分人数",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value + " 人";
              },
            },
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
              2.3,
            ],
          },
          {
            name: "60到80分之间",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value + " 人";
              },
            },
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
              2.3,
            ],
          },
          {
            name: "高于80分人数",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value + " 人";
              },
            },
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
              2.3,
            ],
          },
        ],
      };
      myChart.setOption(option);
    </script>
  </body>
</html>

